<template>
    <div class="sjplatformSelectForm">
        <el-form :inline="true">
            <el-form-item label="流程名称">
                <el-input v-model="approveTable.queryCondition.approveName" placeholder="请输入流程名称..." />
            </el-form-item>
            <el-form-item label="发起人">
                <el-input v-model="approveTable.queryCondition.submitUserName" placeholder="请输入发起人姓名..." />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchData">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="sjplatformtable">
        <el-table :data="approveTable.tableData" v-loading="loading" empty-text="暂无数据" stripe border
            style="width: 100%">
            <el-table-column label="序号" width="60">
                <template #default="{ $index }">
                    {{ $index + 1 + (currentPage - 1) * pageSize }}
                </template>
            </el-table-column>
            <el-table-column prop="approveName" label="流程名称" class-name="left-align">
                <template #default="{ row }">
                    <el-tooltip class="item" effect="light" :content="row.approveName" placement="top">
                        <span>{{ row.approveName }}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="flowTypeName" label="流程类型" width="140" />
            <el-table-column prop="submitUserName" label="发起人" width="140" />
            <el-table-column prop="submitTime" label="发起时间" width="140">
                <template #default="{ row }">
                    <span>{{ commonUtil.Methods.formatDate(row.submitTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="140">
                <template #default="{ row }">
                    <div :class="getStatusStyle(row.status)"> {{
                        getStatusEnumChineseByValue(row.status, ProcessEnum.CreateProject) }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
                <template #default="{ row }">
                    <el-tooltip content="审批" placement="bottom" effect="light">
                        <i class="approve-icon" @click="showApproveDetail(row)"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :total="approveTable.total" :page-size="pageSize"
            :current-page="currentPage" @current-change="handleCurrentChange" />
    </div>
    <el-dialog v-model="newApproveDetailVisible" title="流程审批" width="70%" draggable :destroy-on-close="true">
        <ApproveDeatil ref="approveDetailRef" :showOperation="true" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import commonUtil from "../../utils/common";
import ApproveDeatil from "./ApproveDeatil.vue";
import { useApproveTable } from "../../hooks/ApproveManager/useApproveTable";
import { ProcessEnum, getStatusEnumChineseByValue, getStatusStyle } from "../../hooks/Common/useStatusEnum";
import { useLoginUserStore } from "../../store";

//子组件对象
let approveDetailRef = ref(null);

let currentPage = ref(1);
let pageSize = ref(10); // 默认每页大小
let loading = ref(false);
let loginUserStore = useLoginUserStore();
let newApproveDetailVisible = ref(false);

let { approveTable, approveStore, getWaitToBeDoneApprove, getApproveInfo } =
    useApproveTable(currentPage, pageSize);
getWaitToBeDoneApprove(loginUserStore.currentUser.id);

//翻页事件
function handleCurrentChange(newPage) {
    currentPage.value = newPage;
    searchData(); // 根据当前页获取数据
}

//审批操作
function showApproveDetail(data) {
    approveStore.approveMainModel = data;
    approveStore.approveMainModel.approveRecords = [];
    approveStore.resetApproveRecordModel();
    //当前用户，当前流程的审批信息
    getApproveInfo(loginUserStore.currentUser.id, approveStore.approveMainModel.id).then(() => {
        approveStore.approveRecordModel.id = approveTable.approveRecord.id;
        approveStore.approveRecordModel.pid = approveStore.approveMainModel.id;
        approveStore.approveRecordModel.flowId = approveTable.approveRecord.flowId;
        approveStore.approveRecordModel.nodeId = approveTable.approveRecord.nodeId;
        approveStore.approveRecordModel.approveUserId = approveTable.approveRecord.approveUserId;
        approveStore.approveRecordModel.approveUserName = approveTable.approveRecord.approveUserName;
        approveStore.approveRecordModel.createTime = approveTable.approveRecord.createTime;
        newApproveDetailVisible.value = true;
    })
}
//确定
async function confirm() {
    approveDetailRef.value.submitApprove()
        .then(() => {
            newApproveDetailVisible.value = !newApproveDetailVisible.value;
            searchData();
        })
        .catch(error => {
            commonUtil.Methods.ShowMessage("Oops", error);
        });
}
//取消
function cancel() {
    newApproveDetailVisible.value = !newApproveDetailVisible.value;
}

//查询按钮
function searchData() {
    loading.value = true;
    currentPage.value = 1;
    getWaitToBeDoneApprove(loginUserStore.currentUser.id);
    loading.value = false;
}
</script>